<template>
  <div id="home" >
    <div class="header-content">

      <el-menu
      class="el-menu-demo"
      mode="horizontal"

      background-color="rgb(117, 152, 187)"
      text-color="#fff"
      active-text-color="#fff">
      <el-menu-item index="1">
        <el-image
          style="width: 100px; height: 80%"
          :src="url"
        ></el-image>
      </el-menu-item>
      <el-menu-item index="2"><a href="https://www.kaoshixing.com/">首页</a></el-menu-item>
      <el-menu-item index="3">新闻通知</el-menu-item>
      <el-submenu index="4">
        <template slot="title">实验室介绍</template>
        <el-menu-item index="4-1">实验室图片</el-menu-item>
        <el-menu-item index="4-2">实验室规章制度</el-menu-item>
      </el-submenu>
      <el-menu-item index="5">公告</el-menu-item>
      <el-menu-item index="6">培训信息</el-menu-item>
      <el-menu-item index="7">关于我们</el-menu-item>
      <el-link type="info" @click="login" style="padding-top:20px;margin-right:15px;color:#efefef;font-size:14px">登录</el-link>
      <el-link type="primary" @click="register" style="padding-top:20px;margin-right:15px;color:#efefef;font-size:14px">注册</el-link>

    </el-menu>
    </div>
    
      <div>
        <template>
          <el-carousel :interval="5000" :height="'700px'">
            <el-carousel-item v-for="item in images" :key="item.id">
              <img :src="item.img" />
            </el-carousel-item>
          </el-carousel>
        </template>
      </div>
  </div>
</template>

<script>
export default{
  name: 'app',
  data() {
      return {
        images: [
          {id:1,img: 'http://img2.imgtn.bdimg.com/it/u=4229385094,2627138222&fm=11&gp=0.jpg'},
          {id:2,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1867203596,1307448728&fm=26&gp=0.jpg'},
          {id:3,img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588221684307&di=afc57dafaf99bce66dc8d8ce74e7e68c&imgtype=0&src=http%3A%2F%2Ftu.ossfiles.cn%3A9186%2Fgroup2%2FM00%2F47%2FE1%2FrBgICV1sgfGAG8EjAABDdd_dlmA947.jpg'},
          {id:4,img: 'https://s6.kaoshixing.com/website/website-5.0/images/base/ksx-logo-white.svg'},
        ],
        url: 'https://s6.kaoshixing.com/website/website-5.0/images/base/ksx-logo-white.svg'
      }
    },
  methods:{
    login(){
      this.$router.replace('/login')
    },
    register(){
         this.$router.replace('/register')
    }
  }

}
</script>

<style >

.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .el-button{
    padding-top: 20px;
  }
  .el-button--text{
      color: aliceblue;
  }
  .header-content {
    width:100%;
    min-width: 1200px;
    margin: 0 auto;
  }
</style>